<template>
  <div class="header">
    <div class="header-title">叩丁狼商品管理系统</div>
    <div class="collapse-btn" @click="collapseChange()">
      <i class="el-icon-menu"></i>
    </div>
    <section class="header-right">
      <el-dropdown class="user-name" trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          {{username}}
          <i class="el-icon-caret-bottom"></i>
        </span>
        <el-dropdown-menu>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </section>
  </div>
</template>

<script>
import bus from "./bus";

export default {
  data() {
    return {
      collapse: false
    };
  },
  components: {},
  computed: {
    username() {
      return this.$store.state.userinfo.userInfo.username
    }
  },
  methods: {
    // 侧边栏折叠
    collapseChange() {
      this.collapse = !this.collapse;
      bus.$emit("collapse", this.collapse);
    },
    // 用户名下拉菜单选择事件
    handleCommand(command) {
      if (command === "logout") {
        localStorage.removeItem("token");
        // this.$message.success('退出登录成功');
        // this.$router.push("/login");
        // setTimeout(() => {
        window.location.reload();
        // }, 0)
      }
    }
  }
};
</script>

<style lang="less" scoped type="text/less">
.header {
  width: 100%;
  height: 70px;
  color: #fff;
  background-color: #409eff;

  .header-title {
    float: left;
    padding: 0 15px;
    line-height: 70px;
    font-size: 22px;
  }

  .collapse-btn {
    float: left;
    line-height: 70px;
    font-size: 20px;
  }

  .header-right {
    float: right;
    display: flex;
    align-items: center;
    height: 70px;
    .user-name {
      padding-right: 15px;
      cursor: pointer;

      .el-dropdown-link {
        color: #fff;
      }
    }
  }
}
</style>